/**
 *  *******************useRef*******************
 *
 *  1. 导入useRef函数
 *  2. 执行useRef函数并传入null，返回值为一个对象，内部有一个current属性存放拿到dom对象（组件实例）
 *  3. 通过ref绑定要获取的元素或者组件
 * 
 */


import React, { useEffect, useRef } from "react"

// 组件实例 --> 类组件
// dom对象 -->标签

class TextC extends React.Component {
  getName = () => {
    return 'this is child Test'
  }

  render () {
    return (
      <div>
        我是类组件
      </div>
    )
  }
}

function App () {
  const testRef = useRef(null)
  const hRef = useRef(null)

  useEffect(() => {
    console.log(testRef.current, 'test')
    console.log(hRef.current, 'h')
  }, [])
  // useEffect回调是在dom渲染之后还是之前？  之后！！！
  // 和vue里的watch 效果比较像 但是执行时机是不同的
  return (
    <div>
      <TextC ref={testRef}></TextC>
      <h1 ref={hRef}>this is h1</h1>
    </div>
  )
}
export default App
